<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名操作</title>
	</head>
	<script src="../js/jquery-1.11.1.js"></script>
	<!-- 元素类名操作 针对css中类名，可以做添加，移除，切换和包含类名操作
	addClass()          有参【一个参，多个参】
	                    功能：匹配元素集合中的所有元素添加一个类名或者多个类名
						语法：addClass("类名")
						语法：addClass("类名1 类名2 类名3 .....")
	removeClass()       有参【一个参。多个参】
	                    功能：从匹配元素集合中的所有元素移除一个类名或者多个类名
	toggleClass()       功能：如果元素有指定类名则移除，没有则添加
	hasClass()          功能：检查匹配元素集合中是否存在指定类名，返回值bool，
	 -->
	 <audio src="../img/dafengche.mp3"></audio>
	 <style>
		 .bg{
			 width: 300px;
			 height: 300px;
			 background: #aa55ff;
		 }
		 .bd{
			 border: 10px solid red;
			 border-radius: 50%;
		 }
		 .imga{
			 animation: dfc .8s linear infinite;
		 }
		 @keyframes dfc{
		 	0%{
		 		transform: rotate(180deg);
		 	}
		 	30%{
		 		transform: rotate(360deg);
		 	}
		 	100%{
		 	    transform: rotate(720deg);
		 	}
		 }
		 .imgb{
		 	animation: dfc1 .8s linear infinite;
		 }
		 @keyframes dfc1{
		 	0%{
		 		transform: translate(120px) rotatex(180deg) scale(1);
		 	}
		 	30%{
		 		transform: translate(240px) rotatex(360deg) scale(1.2);
		 	}
		 	100%{
		 	    transform: translate(480px) rotatex(720deg) scale(1.4);
		 	}
		 }
	 </style>
	<body>
		<h1></h1>
		<div id="targetElment"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">判断存在类名</button>
		<div id="resultArea"></div>
		<!-- --------------------------------------- -->
		<img src="../img/dfc.jpg" alt="" id="dfc"/>
		<br />
		<button id="btn1">开转</button>
		<button id="btn2">停转</button>
		<button id="btn3">反转</button>
		
		<script>
			//1.类名切换：css存在可用类名
			$("#addClassBtn").click(function(){
				$("#targetElment").addClass("bg bd");
				$("#resultArea").html("<h4>已经切换样式</h4>");
			});
			//2.移除类名
			$("#removeClassBtn").click(function(){
				$("#targetElment").removeClass("bd");
				$("#resultArea").html("<h4>已经切换样式</h4>");
			});
			//3.切换类名：实习效果，点击切换类名 实现300*300的圆边框 红色背景
			$("#toggleClassBtn").click(function(){
				//存在bg 移除
			    $("#targetElment").toggleClass("bd")
			});
			//5.检查类名是否存在:bg是否存在
			$("#removeClassBtn").click(function(){
				var hc=$("#targetElment").hasClass("bg");
				$("#resultArea").text("目标元素是否存在"+hc);
			});
			// ---------------------------------------案例---------------------------------------
		    $("#btn1").click(function(){
				$("img").attr("src","../img/logo.png")
				$("img").addClass("imga");
			});
			$("#btn2").click(function(){
				$("img").removeClass("imga");
				$("audio").removeAttr("src");
			});
		    $("#btn3").click(function(){
			   $("img").addClass("imgb");
		    });
		</script>
	</body>
</html>